<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>供应商编辑页</title>
  <link rel="stylesheet" href="/layui/css/layui.css">
  <link rel="stylesheet" href="/stylesheets/base.css">
  <script src="/layui/layui.js"></script>
  <script src="/layui/xm-select.js"></script>
  <script src="/javascripts/jquery.js"></script>
  <script src="/javascripts/ajax.js"></script>
</head>
<body>
<form id="editForm" class="layui-form" style="margin: 10px">
  <input type="hidden" id="id" name="id">
  <div class="layui-form-item">
    <label class="layui-form-label" for="name"><span class="red">*</span>商品名称</label>
    <div class="layui-input-block">
      <input type="text" name="name" id="name" placeholder="请输入商品名称" class="layui-input" lay-verify="required">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label" for="supplierId"><span class="red">*</span>供货商</label>
    <div class="layui-input-block">
      <select name="supplierId" id="supplierId">

      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label" for="storeIds"><span class="red">*</span>仓库</label>
    <div class="layui-input-block">
      <div id="storeIds"></div>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label" for="count"><span class="red">*</span>商品数量</label>
    <div class="layui-input-block">
      <input type="text" name="count" id="count" placeholder="请输入商品数量" class="layui-input" lay-verify="required">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label" for="expire"><span class="red">*</span>过期时间</label>
    <div class="layui-input-block">
      <input type="text" name="expire" id="expire" readonly placeholder="请选择过期时间" class="layui-input" lay-verify="required">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label" for="profile">商品描述</label>
    <div class="layui-input-block">
      <textarea class="layui-textarea" name="profile" id="profile" placeholder="请输入商品描述"></textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label" for="role"><span class="red">*</span>状态</label>
    <div class="layui-input-block">
      <select name="status" id="status">
        <option value="1">可用</option>
        <option value="2">禁用</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label" for="goodsImage"><span class="red">*</span>商品图片</label>
    <input type="hidden" name="goodsImage" id="goodsImage">
    <div class="layui-input-block">
      <div class="upload-group">
        <div class="upload-btn">
          <button type="button" class="layui-btn layui-bg-orange" id="uploadBtn">上传图片</button>
        </div>
        <div class="image-group" id="goodsImageDiv">

        </div>
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label"></label>
    <div class="layui-input-block">
      <button type="submit" class="layui-btn" lay-filter="submitBtn" lay-submit>提交</button>
    </div>
  </div>
</form>
</body>
<script>
  const {form,upload,laydate} = layui;
  let storeSelect;
  let imageList = [];
  $(function () {
    const id = location.search.substring(location.search.indexOf("=")+1);
    getSupplerList()
    getStoreList()
    laydate.render({
      elem:"#expire",
      type:"date"
    });
    if(id){
      ajax.get("/goods/info/"+id).then(data=>{
        const {goods,goodsStore,goodsImage} = data
        $("#editForm input,select,textarea").each((index,item)=>{
          const name = $(item).prop("id");
          for(let key in goods){
            if(name === key){
              $("#"+name).val(goods[key]);
            }
          }
        })

        $("#expire").val(formatDate(new Date(goods.expire)))
        imageList = goodsImage.map(item=>item.imgSrc)
        const storeList = goodsStore.map(item=>item.storeId);
        storeSelect.setValue(storeList)
        createGoodsImage()
        form.render();
      })
    }

    upload.render({
      elem:"#uploadBtn",
      url:"/upload",
      data:{type:"goods"},
      done(res){
        if(res.code === 200){
          imageList.push(res.data)
          createGoodsImage();
        }else{
          layer.msg('上传失败！',{icon:5})
        }
      }
    });

    form.on("submit(submitBtn)",function (data) {
      if(!data.field.storeIds){
        layer.msg("请选择商品仓库！",{icon:5})
        return;
      }
      if(!data.field.goodsImage){
        layer.msg("请上传商品图片！",{icon:5})
        return;
      }
      ajax.post("/goods/update",data.field).then(()=>{
        layer.alert(`${id?"修改":"添加"}成功！`,{icon:6},function (){
          closeWin();
          parent.reloadTable();
        })
      })
      return false;
    })
  })

  function closeWin() {
    const index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
    parent.layer.close(index);
  }

  function createGoodsImage() {
    $("#goodsImage").val(imageList.toString())
    let $html = '';
    for(let i=0;i<imageList.length;i++){
      $html+=`<div class="image-item">
            <div class="image-view">
              <img src="${imageList[i]}" alt="">
            </div>
            <div class="image-opt">
              <i class="layui-icon layui-icon-search" onclick="showImage(this)"></i>
              <i class="layui-icon layui-icon-delete" onclick="deleteImage(${i})"></i>
            </div>
          </div>`
    }
    $("#goodsImageDiv").empty().append($html)
  }

  function showImage(_this) {
    const src = $(_this).parents(".image-item").find("img").prop("src");
    layer.photos({
      photos:{
        data:[{
          src
        }]
      }
    })
  }

  function deleteImage(i) {
    layer.confirm("确定删除该图片吗?",{icon:3,title:"询问"},function (index) {
        imageList.splice(i,1);
        createGoodsImage();
      layer.close(index);
    })
  }

  function getSupplerList() {
    ajax.get('/supplier/select').then(data=>{
      let $html = ``
      for(const s of data){
        $html+=`<option value="${s.id}">${s.name}</option>`
      }
      $("#supplierId").empty().append($html);
      form.render();
    })
  }

  function getStoreList() {
    ajax.get("/store/select").then(data=>{
      const storeList = data.map(item=>{
        return {
          name:item.name,
          value:item.id,
          disabled:item.status === 2
        }
      })
      storeSelect = xmSelect.render({
        el:"#storeIds",
        filterable: true,
        data:storeList,
        name:"storeIds",
        tips:"选择仓库",
        max:3,
        toolbar:{
          show:true
        }
      })
    })
  }
</script>
</html>
